<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    <title>中食链-找回密码</title>
</head>
<body>
    <div class="header password-head">
        <div class="center clear">
            <div class="logo"><img th:src="@{/img/Logo.png}" alt="" /></div>

            <div class="login" style="color: #fff;">
                已有账号，马上<a style="text-decoration: underline;" class="loginBtn" th:href="@{/}">登录</a>
            </div>
        </div>
    </div>
    <div class="safetyCode">
        <div class="Aright">
            <img th:src="@{/img/tip_1.png}" alt="" />
            <form id="form-data" method="post">
                <input type="text" th:name="phone" th:id="phone" placeholder="请输入手机号" />
                <div class="telDiv">
                    <input type="tel" th:name="smsCode" th:id="smsCode" placeholder="请输入手机号" />
                    <input class="generate_code" style="vertical-align: bottom;" type="button" id="sendRegisterCode" onclick="sendCode(this);" value="获取手机验证码" />
                </div>
                <div class="error_msg" th:text="${msg}"></div>
                <input class="safeBtn" type="button" id="form-submit" value="确定" />
            </form>
            <form id="form-phone" th:action="@{/forget/forgetPwdThird}" method="post">
                <input type="hidden" id="hiddenPhone" name="phone" />
            </form>
        </div>
    </div>


<script th:src="@{/js/jquery.min.js}" ></script>
<script>

    var basePath = [[@{/}]];

    // 发送 验证码
    function sendCode(obj) {
        var isFlag = true;
        var userName = $("#phone").val();

        if($.trim(userName).length == 0) {
            $(".error_msg").html("*请输入正确的用户名!");
            isFlag = false;
        }

        $.ajaxSetup({
            async: false
        });
        $.post(basePath + "/register/checkUserNameByRegister",{userName:userName}, function(data){
            data = eval("(" + data + ")");
            if(!data.success) {
                $(".error_msg").html("*该手机号未注册!");
                isFlag = false;
            }
        }, "text");

        if(isFlag) {
            $.post(basePath + "/validate/sendCodeByUserName",{userName:userName}, function(data){
                data = eval("(" + data + ")");
                if(data.success) {
                    $(".error_msg").html("*请查看验证码!");
                    settime(obj);
                } else {
                    $(".error_msg").html(data.message);
                }
            }, "text");
        }

    }

    // 倒计时
    var countdown=60;
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.removeAttribute("class");
            obj.value = "获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.setAttribute("class", "bg-btn2");
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
            settime(obj)
        }, 1000)
    }

    $(function(){
        $("#form-submit").on("click", function () {
            var smsCode = $.trim($("#smsCode").val());

            if (smsCode.length == 0) {
                $(".error_msg").html("请输入验证码");
                return;
            }

            $.ajax({
                url: basePath + '/forget/checkSmsCode',
                data: $("#form-data").serialize(),
                dataType: "json",
                type: 'POST',
                success: function(data) {
                    if (data.success) {
                        $("#hiddenPhone").val(data.data.phone);
                        $("#form-phone").submit();
                    } else {
                        $(".error_msg").html(data.message);
                    }
                }
            });
        })
    });



</script>

</body>
</html>